<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/main.js"></script>
    <style>
      /*亮色模式*/
      @media (prefers-color-scheme: light) {
        body {
          background: linear-gradient(
            45deg,
            #feac5e 0,
            #feac5e 16.66%,
            #1cbbb4 16.66%,
            #1cbbb4 33.33%,
            #39b54a 33.33%,
            #39b54a 50%,
            #feac5e 50%,
            #feac5e 66.66%,
            #1cbbb4 66.66%,
            #1cbbb4 83.33%,
            #39b54a 83.33%,
            #39b54a
          );
          color: #202b20;
        }
        .背景 {
          background-color: #f3feff;
        }

        .透明 {
          background-color: #ffffffa6;
        }

        a {
          color: #000;
        }
        input::placeholder {
          color: #202b20;
        }
        input::-webkit-input-placeholder {
          color: #202b20;
        }
      }
      /*暗色模式*/
      @media (prefers-color-scheme: dark) {
        body {
          background: linear-gradient(
            45deg,
            #cd8c50 0,
            #cd8c50 16.66%,
            #0e5c58 16.66%,
            #0e5c58 33.33%,
            #267731 33.33%,
            #267731 50%,
            #cd8c50 50%,
            #cd8c50 66.66%,
            #0e5c58 66.66%,
            #0e5c58 83.33%,
            #267731 83.33%,
            #267731
          );
          color: #999;
        }
        .背景 {
          background-color: #202b20;
        }

        .透明 {
          background-color: #000000a6;
        }
        a {
          color: #aaa;
        }
        input::placeholder {
          color: #ccc;
        }
        input::-webkit-input-placeholder {
          color: #ccc;
        }
        #输入框 {
          color: #aaa;
        }
      }

      body {
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 90vh;
        background-size: 800px 800px;
      }

      .输入框盒子 {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .阴影 {
        box-shadow: rgb(0 0 0 / 20%) 0px 2px 1px -1px,
          rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px;
      }

      .模糊 {
        /* 模糊效果 */
        backdrop-filter: blur(15px);
      }
      .圆角 {
        /* 圆角 */
        border-radius: 15px;
      }
      #输入框 {
        display: block;
        /* 宽度 */
        width: 100%;
        /* 高度 */
        height: 60px;
        max-width: 450px;
        margin: 10px auto;
        text-align: center;
        font-size: 30px;
        outline: none;
        font-weight: 560;
        border: 0px;
      }
      #按钮 {
        margin-left: -60px;
        z-index: 2;
      }
    </style>
  </head>
  <body>
    <div class="输入框盒子">
      <input
        placeholder="今日事，今日毕。"
        id="输入框"
        class="透明 阴影 模糊 圆角"
      />
      <span id="按钮" onclick="勾叉()">✅</span>
    </div>
    <script>
      let 有事 = false;

      function 勾叉() {
        let 按钮 = document.getElementById("按钮");
        let 输入框 = document.getElementById("输入框");

        if (有事) {
          有事 = false;
          按钮.innerText = "✅";
          输入框.value = "";
          输入框.readOnly = false;
          window.localStorage.removeItem("事情");
        } else {
          有事 = true;
          按钮.innerText = "❎";
          输入框.readOnly = true;
          window.localStorage.setItem("事情", 输入框.value);
        }
      }
      let 事情数据 = window.localStorage.getItem("事情");
      if (事情数据) {
        document.getElementById("输入框").value = 事情数据;
        勾叉();
      }
    </script>
  </body>
</html>
